<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">
    <!-- 子组件模板-->
    <template id="child-template">
        <input v-model="msg">
        <button v-on:click="notify">Dispatch Event</button>
    </template>

    <!-- 父组件模板-->
    <div id="events-example">
        <p>Messages:{{ messages|json}}</p>
        <child v-on:child-msg="handleIt"></child>
    </div>

    <hr/>

    <div id="parent">
        <user-profile v-ref:profile></user-profile>
    </div>






</div>


<script type="text/javascript">

    //注册子组件
    Vue.component('child', {
        template: '#child-template',
        data: function () {
            return {msg: "hellow"}
        },
        methods: {
            notify: function () {
                if (this.msg.trim()) {
                    //$dispatch() 派发事件，事件沿着父链冒泡；
                    this.$dispatch('child-msg', this.msg);
                    this.msg = ''
                }
            }

        }
    })
//    初始化父组件
//    接收到的消息时将事件推入一个数组
    var parent = new Vue({
        el:'#events-example',
        data:{
            messages:[]
        },
        //在创建实例时 event选项简单调用$on(监听事件)
        events:{
            'child-msg':function(msg){
                // 事件回调内的 `this` 自动绑定到注册它的实例上
                this.messages.push(msg);
            },
            //TODO 不起作用啊
            'handleIt':function(event){
                console.log(event);
                alert("父组件本身的事件");

            }

        }

    })

    var parent = new Vue({
        el:"#parent",
    })


    var child = parent.$refs.profile;
    console.log(child);





</script>

</body>
</html>